// 引入 react 依赖
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Text, View, Platform, Image } from 'react-native';

// 引入第三方依赖
import _ from 'lodash';
import pureRender from 'pure-render-decorator';
import Icon from 'react-native-vector-icons/Ionicons';

// antd 按需加载
import { } from '@ant-design/react-native';

// 引入 处理数据 所需文件
import { } from './module.js'

// 引入样式
import Styles from './style.js';

// 引入公用组件
import { } from '../../components/index.js'

// 引入专用组件
// import { } from './components'

// 引入专用组件
import { ScreenWidth, ScreenHeight } from '../../util/utils'


class TabBar extends Component {
	constructor(props) {
		super(props);
		this.data = {
			home: {
				title: '首页',
				defaultIcon: <Image resizeMode='cover' style={{ width: 22, height: 22 }} source={require('../../static/images/icon-home.png')} />,
				activeIcon: <Image resizeMode='cover' style={{ width: 22, height: 22 }} source={require('../../static/images/icon-home.png')} />
			},
			exchange: {
				title: '实盘',
				defaultIcon: <Image resizeMode='cover' style={{ width: 22, height: 22 }} source={require('../../static/images/icon-shipan.png')} />,
				activeIcon: <Image resizeMode='cover' style={{ width: 22, height: 22 }} source={require('../../static/images/icon-shipan.png')} />
			},
			biquan: {
				title: '币圈',
				defaultIcon: <Image resizeMode='cover' style={{ width: 22, height: 22 }} source={require('../../static/images/icon-biquan.png')} />,
				activeIcon: <Image resizeMode='cover' style={{ width: 22, height: 22 }} source={require('../../static/images/icon-biquan.png')} />
			},
			msg: {
				title: '消息',
				defaultIcon: <Image resizeMode='cover' style={{ width: 22, height: 22 }} source={require('../../static/images/icon-msg.png')} />,
				activeIcon: <Image resizeMode='cover' style={{ width: 22, height: 22 }} source={require('../../static/images/icon-msg.png')} />
			},
			user: {
				title: '我的',
				defaultIcon: <Image resizeMode='cover' style={{ width: 22, height: 22 }} source={require('../../static/images/icon-user.png')} />,
				activeIcon: <Image resizeMode='cover' style={{ width: 22, height: 22 }} source={require('../../static/images/icon-user.png')} />
			},
		}
	}
	render() {
		let param = this.data[this.props.sceneKey];
		let icon = this.props.focused ? param.activeIcon : param.defaultIcon;
		let activeStyle = this.props.focused ? { color: '#97A3FF' } : { color: '#BFBFC0' };
		return (
			<View style={Styles.container}>
				{icon}
				<Text style={[activeStyle, Styles.tabbarItem]}>{param.title}</Text>
			</View>
		)
	}
}


export default TabBar
